<#assign entityBaseColumns = ["id", "created_by", "created_from", "updated_by", "deleted"]>
<script setup>
import {onMounted, reactive, ref, withDirectives} from "vue";
import {NButton, NSpace, useMessage, useDialog} from "naive-ui";
import permission from "@/directive/permission.js";
import {page, deleteById} from "@/apis/${tablePrefix}/${mappingBase}.js";
import {OPERATE_DRAWER_MODE} from "@/common/constant.js";
import OperateDrawer from "@/views/${tablePrefix}/${mappingBase}/operate-drawer.vue";
const message = useMessage()
const dialog = useDialog()
onMounted(async () => {
  await loadPageData()
})
const loading = ref(false)
const dataSource = ref([])
const searchForm = reactive({
  name: undefined
})
const loadPageData = async () => {
  loading.value = true
  const {code, data} = await page(pagination.page, pagination.pageSize)
  loading.value = false
  if (code === 0) {
    dataSource.value = data.records
    pagination.itemCount = data.totalRow
  }
}
const pagination = reactive({
  itemCount: 0,
  page: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40, 50],
  showSizePicker: true,
  showQuickJumper: true,
  prefix: () => `共<#noparse> ${pagination.itemCount} </#noparse>条`,
  onUpdatePage: async (page) => {
    pagination.page = page
    await loadPageData()
  },
  onUpdatePageSize: async (pageSize) => {
    pagination.pageSize = pageSize
    await loadPageData()
  }
})
const columns = ref([
<#list columns as column>
<#if !entityBaseColumns?seq_contains(column.columnName)>
<#if column.isNullable() = true>
  {
    title: '${column.columnComment}',
    key: '${column.columnNameCamel}',
  },
</#if>
</#if>
</#list>
  {
    title: '操作',
    align: 'center',
    key: 'operate',
    fixed: 'right',
    width: 220,
    render: (row) => {
      return h(NSpace, null, () => {
        return [
          withDirectives(h(NButton, {onClick: () => showModifyDrawer(row.id),}, () => '修改'), [[permission, '${basePermission}:modify']]),
          withDirectives(h(NButton, {onClick: () => showDetailDrawer(row.id),}, () => '详情'), [[permission, '${basePermission}:detail']]),
          withDirectives(h(NButton, {onClick: () => onDelete(row.id),}, () => '删除'), [[permission, '${basePermission}:delete']]),
        ]
      })
    }
  }
])
const operateDrawerOption = reactive({
  visible: false,
  mode: OPERATE_DRAWER_MODE.DETAIL,
  id: undefined
})
const showAddDrawer = () => {
  operateDrawerOption.mode = OPERATE_DRAWER_MODE.ADD
  operateDrawerOption.visible = true
}

const showModifyDrawer = (id) => {
  operateDrawerOption.mode = OPERATE_DRAWER_MODE.EDIT
  operateDrawerOption.id = id
  operateDrawerOption.visible = true
}

const showDetailDrawer = (id) => {
  operateDrawerOption.mode = OPERATE_DRAWER_MODE.DETAIL
  operateDrawerOption.id = id
  operateDrawerOption.visible = true
}
const onDelete = async (id) => {
  dialog.warning({
    title: '删除',
    content: '确定删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const {code} = await deleteById(id)
      if (code === 0) {
        message.success("删除成功")
        await loadPageData()
      }
    }
  })
}
</script>

<template>
  <n-space vertical>
    <n-space>
      <n-form inline label-placement="left" :model="searchForm">
        <n-form-item label="表名" path="name">
          <n-input v-model:value="searchForm.name" placeholder="请输入" clearable/>
        </n-form-item>
      </n-form>
      <n-button type="primary" @click="loadPageData">查询</n-button>
    </n-space>
    <n-button v-permission="'${basePermission}:add'" type="primary" @click="showAddDrawer">新增</n-button>
    <n-data-table
        remote
        ref="table"
        :columns="columns"
        :data="dataSource"
        :loading="loading"
        :pagination="pagination"
        :row-key="(rowData) => rowData.id"
    />
  </n-space>
  <operate-drawer v-model:show="operateDrawerOption.visible"
                  :mode="operateDrawerOption.mode"
                  :id="operateDrawerOption.id"
                  @success="loadPageData"/>
</template>

<style scoped>

</style>